<template>
  <div>
    <q-separator v-if="items.length > 0" />
    <q-item-label header v-if="items.length > 0">{{ label }}</q-item-label>
    <q-item
      clickable
      v-ripple
      @click="changeSession(item.id)"
      v-for="item in itemsDisplay"
      :key="item.id"
      :active="sessionId === item.id"
      active-class="bg-grey-1 text-grey-10"
      class="text-grey-8 truncate-single-line"
    >
      <q-item-section>{{ item.name }}</q-item-section>
      <q-tooltip anchor="center right" self="center left">
        {{ item.updateTime }}
      </q-tooltip>
    </q-item>
    <q-item
      clickable
      v-ripple
      dense
      v-if="itemsDisplay.length < items.length"
      @click="addDataForHistory(5, items, itemsDisplay)"
    >
      加载更多...
    </q-item>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
    },
    items: {
      type: Array,
      required: true,
    },
    itemsDisplay: {
      type: Array,
      required: true,
    },
    sessionId: {
      type: String,
      required: true,
    },
    addDataForHistory: {
      type: Function,
      required: true,
    },
    changeSession: {
      type: Function,
      required: true,
    },
  },
};
</script>
